{template 'web/common/common'}
{template 'web/goods/navbar'}
<link rel="stylesheet" type="text/css" href="../addons/kundian_farm/resource/css/style.css" />
<link rel="stylesheet" type="text/css" href="../addons/{php echo $_GPC['m']}/resource/swal/dist/sweetalert2.min.css" />
<!--<link rel="stylesheet" type="text/css" href="../addons/kundian_farm/resource/css/sku.css" />-->
<style>
    .sku{width: 100%;height:100px;border: 1px solid #e7e7eb;margin-bottom: 20px;  }
    .sku .sku-name{width: 95%;height: 20px;padding-left: 2%;padding-top: 10px;}
    .sku .sku-name .delete{width: 20px;height:20px;margin-left: 10px;margin-top: -2px;}
    .sku .sku-value{width: 95%;height: auto;padding-left: 2%;padding-top: 20px;overflow: hidden;}
    .sku .sku-value .v-li{width: auto;height: 30px;float: left;}
    .sku .sku-value .v-li .li-txt{display: block;width: 50px;height: 20px;background: #dedede;float: left;line-height: 20px;text-align: center;}
    .sku .sku-value .v-li .li-close{display: block;width: 20px;height: 20px;background:gray;float: left;}
    .sku .sku-value .v-li img{width: 20px;height: 20px;position: relative;left: -20px;float: left;}
    .span-tag{float: right;position: relative;top: -25px; left: 32px;}
</style>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            积分商城商品添加/修改
        </h3>
    </div>
    <div class="panel-body">
        <form id="sign-form" class="form-horizontal" enctype="multipart/form-data" role="form" method="post" action="{url 'site/entry/integralShop',array('m'=>'kundian_farm','op'=>'saveModel','version_id'=>$_GPC['version_id'])}" name="submit" style="padding: 20px 0;">
            <input type="hidden" name="id" value="{$list['id']}">
            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control"  name="goods_name" id="goods_name" value="{$list['goods_name']}">
                </div>
            </div>   

            <div class="form-group">
                <label class="col-sm-2 control-label">商品分类</label>
                <div class="col-sm-8">
                    <select name="type_id" id="type_id" class="form-control">
                        <option value="">请选择</option>
                        {loop $goodsType $key $val}
                        <option value="{$val['id']}">{$val['type_name']}</option>
                        {/loop}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">现价</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  name="price" id="price" value="{$list['price']}">
                    <span class="span-tag">积分</span>
                </div>
            </div>   


            <div class="form-group">
                <label class="col-sm-2 control-label">原价</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  name="old_price" id="old_price" value="{$list['old_price']}">
                    <span class="span-tag">积分</span>
                </div>
            </div>  


            <div class="form-group">
                <label class="col-sm-2 control-label">兑换量</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  name="sale_count" id="sale_count" value="{$list['sale_count']}">
                    <span class="span-tag">件</span>
                </div>
            </div>  

            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  name="count" id="count" value="{$list['count']}">
                    <span class="span-tag">件</span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">运费</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  name="send_price" id="send_price" value="{$list['send_price']}">
                    <span class="span-tag">元</span>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">封面（180*180）</label>
                <div class="col-sm-8">
                    {php echo tpl_form_field_image('cover',$list['cover']);}
                </div>
            </div>  

            <div class="form-group">
                <label class="col-sm-2 control-label">商品轮播图(375*350)</label>
                <div class="col-sm-8">
                    {php echo tpl_form_field_multi_image('goods_slide',$list['cover']);}
                </div>
            </div>

             <div class="form-group">
                <label class="col-sm-2 control-label">是否上架</label>
                <div class="col-sm-8">
                    {if $list['is_put_away']==1}
                    <input type="checkbox" checked class="js-switch" value="1" name="is_put_away">
                    {else}
                    <input type="checkbox" class="js-switch" name="is_put_away" value="1">
                    {/if}
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">是否推荐</label>
                <div class="col-sm-8">
                    {if $list['is_recommend']==1}
                    <input type="checkbox" checked class="js-switch" value="1" name="is_recommend">
                    {else}
                    <input type="checkbox" class="js-switch" name="is_recommend" value="1">
                    {/if}
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">排序</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  name="rank" id="rank" value="{$list['rank']}">
                </div>
            </div>

        
            <div class="form-group">
                <label class="col-sm-2 control-label">是否启用规格</label>
                <div class="col-sm-8">
                    {if $list['is_open_sku']==1}
                    <input type="checkbox" checked class="js-switch" value="1" name="is_open_sku">
                    {else}
                    <input type="checkbox" class="js-switch" name="is_open_sku" value="1">
                    {/if}
                </div>
            </div>
            <div class="form-group goods-sku-item" style="display: none;">
                <label class="col-sm-2 control-label">规格组和规格值*</label>
                <div class="col-sm-8">
                    <div class="input-group"  style="width: 300px;">
                        <span class="input-group-addon">规格组</span>
                        <input type="text" name="g-sku-item" class="form-control">
                        <span class="input-group-addon" id="addSkuItem">添加</span>
                    </div>
                </div>
            </div>
            <!--规格值-->
            <div class="form-group goods-sku-value" style="display: none;">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-8" id="appendSku">
            
                    <!-- <div class="sku">
                        <div class="sku-name">尺寸 <img class="delete" src="{$_W['siteroot']}addons/kundian_farm/resource/img/delete.png" alt="删除"></div>
                        <div class="sku-value">
                            <div class="v-li">
                                <span class="li-txt">L</span>
                                <span class="li-close"></span>
                                <img src="{$_W['siteroot']}addons/kundian_farm/resource/img/delete-1.png" alt="">
                            </div>
                            <div class="v-li">
                                <span class="li-txt">M</span>
                                <span class="li-close"></span>
                                <img src="{$_W['siteroot']}addons/kundian_farm/resource/img/delete-1.png" alt="">
                            </div>
                            <div class="v-li">
                                <div class="input-group"  style="width: 300px;">
                                    <span class="input-group-addon">规格值</span>
                                    <input type="text" name="g-sku-val" class="form-control">
                                    <span class="input-group-addon" class="addSkuVal">添加</span>
                                </div>
                            </div>

                        </div>
                    </div> -->
                </div>
            </div>

            <div class="form-group goods-sku-item-value" style="display: none;">
                <label class="col-sm-2 control-label">价格和库存</label>
                <div class="col-sm-8 table-sku">
                    <!-- <table class="table table-bordered">
                        <tr>
                            <th>颜色</th>
                            <th>尺码</th>
                            <th>库存</th>
                            <th>价格</th>
                            <th>货号</th>
                            <th>规格图片</th>
                        </tr>
                        <tr>
                            <td>白色</td>
                            <td>L</td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                        </tr>
                    </table> -->
                </div>
            </div>
            <div class="form-group spec_cover" style="display: none;">
                <label class="col-sm-2 control-label">批量上传规格图片(100*100)</label>
                <div class="col-sm-8">
                    {php echo tpl_form_field_multi_image('spec_src',$list['spec_src']);}
                </div>
            </div>

            <div class="form-group spec_cover_tag" style="display: none;">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-8">
                    <span style="color:gray;">注意：上传规格图片时，请一 一对应上面的规格!</span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-8">
                    {php echo tpl_ueditor('goods_desc');}
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" name="submit" class="btn btn-default">
                    <a class="btn btn-default" href="{url 'site/entry/integralShop',array('m'=>'kundian_farm','op'=>'integral_shop')}">返回</a>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    require(["../addons/{php echo $_GPC['m']}/resource/swal/dist/sweetalert2.min.js"],function(){
        $(function () {
            $("input[name='is_open_sku']").change(function(){
                if($("input[name='is_open_sku']").is(":checked")){
                    $(".goods-sku-item").show();
                    $(".goods-sku-value").show();
                   $(".goods-sku-item-value").show();
                    $(".spec_cover").show();
                    $(".spec_cover_tag").show();
                }else{
                    $(".goods-sku-item").hide();
                    $(".goods-sku-value").hide();
                    $(".goods-sku-item-value").hide();
                    $(".spec_cover_tag").hide();
                    $(".spec_cover").hide();
                }
            })

            var skuItem=new Array();        //规格选项
            var newItem=new Array();
            var specArr=new Array();        //数据中的规格id
            var specVal=new Array();        //数据中的规格值id
            
            //添加规格值
            $("#addSkuItem").click(function () {
                var sku_value=$("input[name='g-sku-item']").val();
                $("input[name='g-sku-item']").val('');  //重置input框
                if(sku_value==''){
                    alert('请填写规格组！');
                    return false;
                }else{
                    //添加规格
                    $.ajax({
                        type:"post",
                        url:"{url 'site/entry/'.$_GPC['do'],array('m'=>$_GPC['m'],'op'=>'addSkuItem','version_id'=>$_GPC['version_id'])}",
                        data:{sku_name:sku_value},
                        dataType:"json",
                        success:function(res){
                            console.log(res);
                            var spec_id=res.spec_id;
                            skuItem.push(sku_value);
                            specArr.push(spec_id);
                            $('.goods-sku-value').show();  //显示规格组
                            var valStr='';
                            valStr+='<input type="hidden" name="specItem[]" value="'+spec_id+'" /><div class="sku sku_'+spec_id+'"><div class="sku-name">'+sku_value+'<img class="delete" data-id="'+spec_id+'" data-itemid="'+spec_id+'" src="{$_W['siteroot']}addons/kundian_farm/resource/img/delete.png" alt="删除"></div>';
                            valStr+='<div class="sku-value sku-value_'+spec_id+'">';
                            valStr+='<div class="v-li">';
                            valStr+='<div class="input-group"  style="width: 300px;">';
                            valStr+='<span class="input-group-addon">规格值</span>';
                            valStr+='<input type="text" name="g-sku-val_'+spec_id+'" class="form-control">';
                            valStr+='<span class="input-group-addon addSkuVal" data-specid="'+spec_id+'">添加</span>';
                            valStr+='</div></div></div></div>';
                            $("#appendSku").append(valStr);
                        }
                    })
                }
            })
            //删除规格选项
            $("#appendSku").on('click','.delete',function () {
                var id=$(this).attr('data-id');
                var itemid=$(this).attr("data-itemid");
                for(var i=0;i<specArr.length;i++){
                    if(specArr[i]==itemid){
                        specArr.splice(i,1);        
                    }
                }
                var spec_id_str=specArr.join("_");
                $.ajax({
                    type:"post",
                    url:"{url 'site/entry/'.$_GPC['do'],array('m'=>$_GPC['m'],'op'=>'deleteSkuItem','version_id'=>$_GPC['version_id'])}",
                    data:{id:id,spec_id_str:spec_id_str},
                    dataType:"json",
                    success:function(res){
                        if(res.code==1){
                            $(".sku_"+id).remove();
                            //追加表格
                            getTableData(res);

                        }
                    }
                })
               
            })

            //添加规格选项值
            $("#appendSku").on('click','.addSkuVal',function(){
                var that=$(this);
                var specid=$(this).attr("data-specid");     //获取当前的规格组id
                var g_sku_val=$("input[name='g-sku-val_"+specid+"']").val();
                $("input[name='g-sku-val_"+specid+"']").val('');    //清理数据
                var skuVal=new Array();         //规格值
                var spec_id_str=specArr.join('_');
                if(g_sku_val==''){
                    alert('请填写规格值！');
                    return false;
                }else{
                    $.ajax({
                        type:"post",
                        url:"{url 'site/entry/'.$_GPC['do'],array('m'=>$_GPC['m'],'op'=>'addSkuVal','version_id'=>$_GPC['version_id'])}",
                        data:{specid:specid,spec_value:g_sku_val,spec_id_str:spec_id_str},
                        dataType:"json",
                        success:function(res){
                            var spec_val_id=res.spec_val_id;  //刚插入的规格值的id
                            specVal.push(spec_val_id);
                            var specStr='';
                            specStr+='<div class="v-li v-li_'+spec_val_id+'">';
                            specStr+='<span class="li-txt">'+g_sku_val+'</span>';
                            specStr+='<span class="li-close"></span>';
                            specStr+='<img data-specid="'+specid+'" data-valid="'+spec_val_id+'" src="{$_W['siteroot']}addons/kundian_farm/resource/img/delete-1.png" class="deleteSpecVal" alt="">'
                            specStr+='</div>';
                            $(".sku-value_"+specid).prepend(specStr);


                            //追加表格
                            getTableData(res);
                        }
                    })
                }
            })

            //删除规格值
            $("#appendSku").on('click','.deleteSpecVal',function(){
                var spec_id=$(this).attr("data-specid");        //规格id
                var spec_val_id=$(this).attr("data-valid");     //规格值id
                var spec_id_str=specArr.join('_');
                $.ajax({
                    type:'post',
                    url:"{url 'site/entry/'.$_GPC['do'],array('m'=>$_GPC['m'],'op'=>'deleteSkuVal','version_id'=>$_GPC['version_id'])}",
                    data:{spec_id:spec_id,spec_val_id:spec_val_id,spec_id_str:spec_id_str},
                    dataType:'json',
                    success:function(res){
                        console.log(res);
                        if(res.code!=2){
                            for(var i=0;i<specVal;i++){
                                if(specVal[i]==spec_id){
                                    specVal.splice(i,1);
                                }
                            }
                            $(".v-li_"+spec_val_id).remove();
                            getTableData(res);
                        }
                    }
                })
            })
        })
        

        function getTableData(res){
            var tableSpec=res.specItem;     //规格项
            var tableSpecVal=res.skuSpec;   //规格值
            var newSkuSpec=res.newSkuSpec;  //组合
            var table_str='';
            table_str+='<table class="table table-bordered">';
            table_str+='<tr>';
            for(var i=0;i<tableSpec.length;i++){
                table_str+='<th>'+tableSpec[i].name+'</th>';
            }
            
            table_str+='<th>库存</th>';
            table_str+='<th>价格</th>';
            table_str+='<th>货号</th>';
            table_str+='</tr>';
            for(var j=0;j<tableSpecVal.length;j++){
                var n=parseInt(j)+1;
                table_str+='<tr>';
                for(var m=0;m<tableSpecVal[j].length;m++){
                    table_str+='<td>'+tableSpecVal[j][m].spec_value+'</td>';
                }
                table_str+='<td><input type="hidden" name="sku_name['+newSkuSpec[n]+']" value="'+newSkuSpec[n]+'" />';
                table_str+='<input type="text" name=item['+newSkuSpec[n]+'][count]></td>';
                table_str+='<td><input type="text" name=item['+newSkuSpec[n]+'][price]></td>';
                table_str+='<td><input type="text" name=item['+newSkuSpec[n]+'][goods_num]></td>';
                
                table_str+='</tr>';
            }
            
            table_str+='</table>';
            $(".table-sku").html(table_str);
        }


    })
</script>